<template>
    <div class="fxn-section">
        <div class="fxn-system">
            <el-form :model="sysForm" :rules="refForm" label-width="200">
                <el-form-item label="允许上传文件类型" prop="upload_file_type">
                    <el-select multiple v-model="sysForm.upload_file_type" placeholder="请选择">
                        <el-option v-for="item in upload_file_arr" :key="item.value" :label="item.label" :value="item.value"></el-option>                                 
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="btnLoading" @click="handleSubmit">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                btnLoading: false,
                //文件类型
                upload_file_arr:[
					{ value: 'pdf',label: 'pdf' }, 
					{ value: 'doc',label: 'doc' },
					{ value: 'docx',label: 'docx' },
					{ value: 'jpg',label: 'jpg' },
					{ value: 'png',label: 'png' },
					{ value: 'xls',label: 'xls' },
					{ value: 'xlsx',label: 'xlsx' },
					{ value: 'ppt',label: 'ppt' },
					{ value: 'pptx',label: 'pptx' }
				],

                //表单
                sysForm: {
                    upload_file_type: '',
                },
                refForm: {
                    upload_file_type: [{ required: true, message: "请选择允许上传文件类型", trigger: "blur" }],
                },
            })

            //保存
            const handleSubmit = () => {
                state.btnLoading = true;
                proxy.$http.post('/api/setting/save',state.sysForm)
                .then(res=>{
                    state.btnLoading = false;
                    const { code, error ,data } = res;
                    if(code != 200){
                        proxy.$message.error(error);
                    }else{
                        proxy.$message.success(data);
                    }
                })
            }

            //获取系统设置
            const getSetting = () => {
                proxy.$http.post('/api/setting/index')
                .then(res=>{
                    state.btnLoading = false;
                    const { code, error ,data } = res;
                    if(code != 200){
                        proxy.$message.error(error);
                    }else{
                        state.sysForm = data;
                        state.sysForm.files = [{name: data.logo, url: data.logo}];
                    }
                })
            }
            
            //Dom加载
            onMounted(()=>{
                getSetting();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getSetting,
                handleSubmit,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    .fxn-system{
        width: 500px;
        padding: 20px 10px 8px;
        overflow: hidden;
    }
</style>